<template>
  <div id="app" class="container mt-4">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">学生管理系统</a>
        <div class="ml-auto">
          <button 
            v-if="!isLoggedIn"
            class="btn btn-outline-light"
            @click="login"
          >
            登录
          </button>
          <button 
            v-else
            class="btn btn-outline-light"
          >
            个人中心
          </button>
        </div>
      </div>
    </nav>

    <h2 v-if="isLoggedIn" class="text-center mb-4">学生信息管理</h2>
      
    <div v-if="isLoggedIn">
      <StudentForm @submit="handleStudentSubmit" />
      
      <StudentList 
        :students="students" 
        @delete="handleStudentDelete" 
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import StudentForm from './components/StudentForm.vue';
import StudentList from './components/StudentList.vue';

// 登录状态
const isLoggedIn = ref(false);

// 登录功能
const login = () => {
  isLoggedIn.value = true;
};

// 学生列表
const students = ref([]);

// 处理子组件提交的学生信息
const handleStudentSubmit = (student) => {
  if (student?.name?.trim()) {
    students.value.push({...student});
  } else {
    alert('请输入有效的学生姓名');
  }
};

// 处理子组件删除学生信息
const handleStudentDelete = (index) => {
  students.value.splice(index, 1);
};
</script>

<style>
body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
}

.container {
  max-width: 800px;
  padding: 20px;
}

.text-center {
  text-align: center;
}

.mt-4 {
  margin-top: 20px;
}

.navbar {
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .student-form {
    padding: 15px;
  }
  
  .list-group {
    margin-top: 20px;
  }
}
</style>
